<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>IdeaBank</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
	
	<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,400italic,600italic' rel='stylesheet' type='text/css'>
	
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	<script src="js/jquery.colorbox-min.js"></script>
	<script src="js/jquery.mCustomScrollbar.js"></script>
	<script src="js/jquery.rateit.js" type="text/javascript"></script>
	
	<script>
    $(document).ready(function($){
		$('.thumb:nth-child(3n)').addClass('last');
		
		$(".proj_gallery").colorbox({rel:'proj_gallery', transition:"fade", maxheight:"95%"});
		
		$("#rate").bind('rated', function (event, value) { $('#value5').text(value + ' / 5'); });
		
		if($(document).height()<650){
			$('#cat_options').hide();
			$('#cat_dropdown').show();
		}else{
			$('#cat_options').show();
			$('#cat_dropdown').hide();
		}
		
		$(".proj_cont").mCustomScrollbar({
			set_width:false,
			horizontalScroll:true,
			autoDraggerLength:false,
			mouseWheel:false,
			scrollInertia:250, 
			scrollButtons:{
				scrollAmount:700 
			}
		});
		
		var winHeight = $(window).height();
		var pageheadHeight = $('.page_head').height();
		var ideaHeight = winHeight - pageheadHeight;
		$('.idea').css('height',ideaHeight);
		var ideaheadHeight = $('.idea_head').height();
		var ideacontentHeight = Math.round(((ideaHeight - ideaheadHeight -30 -70 -25)/ideaHeight*100));
		$('.idea_content').css('height',ideacontentHeight+'%');
    });	
	
	$(window).resize(function() {
		var bodyheight = $(document).height();
		var pageheadHeight = $('.page_head').height();
		var ideaHeight = bodyheight - pageheadHeight;
		$('.idea').css('height',ideaHeight);
		var ideaheadHeight = $('.idea_head').height();
		var ideacontentHeight = Math.round(((ideaHeight - ideaheadHeight -30 -70 -25)/ideaHeight*100));
		$(".idea_content").height(ideacontentHeight+'%');
		
		if($(document).height()<650){
			$('#cat_options').hide();
			$('#cat_dropdown').show();
		}else{
			$('#cat_options').show();
			$('#cat_dropdown').hide();
		}
	});
	
	$(document).ready(function($){
		$(".idea_content").mCustomScrollbar({
			scrollInertia:250, 
			mouseWheel:true, 
			autoDraggerLength:false,
			contentTouchScroll:true
		});
	});
    </script>
</head>

<body>
	<div class="sidebar">
		<a href="index.html"><img src="images/logo_ideabank.png" /></a>
		<div class="text_welcome" style="visibility:hidden;">
			Welcome <a href="#">Admin</a>
		</div>
		<div class="searchbar">
			<input type="search" class="search left" /><input type="submit" class="btn_search left" value="" />
		</div>
		<ul class="nav">
			<li><a href="#">HOW IT WORKS</a></li>
			<li><a href="#">BROWSE</a></li>   
			<li><a href="#">CREATE</a></li> 
			<li><a href="#">FAQ</a></li> 
			<li><a href="#">CONTACT</a></li> 
			<li><br /></li>
			<li><a href="#">SIGN UP</a></li>          
			<li><a href="#">LOG IN <img src="images/icon_lock.png" /></a></li>
		</ul><!--End of .nav-->
		
		<div class="filter_cat">
			<b class="weight600">CATEGORIES</b><br />
			<select style="display:none;" id="cat_dropdown">
				<option>All Fields</option>
				<option>Art</option>
				<option>Comics</option>
				<option>Dance</option>
				<option>Fashion</option>
				<option>Film & Video</option>
				<option>Food</option>
				<option>Games</option>
				<option>Music</option>
				<option>Photography</option>
				<option>Publishing</option>
				<option>Technology</option>
				<option>Theater</option>
			</select>
			<ul id="cat_options">
				<li><a href="#" class="active">All Fields</a></li>
				<li><a href="#">Art</a></li>
				<li><a href="#">Comics</a></li>
				<li><a href="#">Dance</a></li>
				<li><a href="#">Design</a></li>
				<li><a href="#">Fashion</a></li>
				<li><a href="#">Film & Video</a></li>
				<li><a href="#">Food</a></li>
				<li><a href="#">Games</a></li>
				<li><a href="#">Music</a></li>
				<li><a href="#">Photography</a></li>
				<li><a href="#">Publishing</a></li>
				<li><a href="#">Technology</a></li>
				<li><a href="#">Theater</a></li>
			</ul>
		</div><!--End of .filter_cat-->
		<div cass="clearboth"></div>
		
		<div class="foot clearboth">
			Copyright © 2014 Ideabank.<br />
			All rights reserved.
		</div><!--End of .foot-->
	</div><!--End of .sidebar-->
	<div class="container">
		
	</div><!--End of .container-->
</body>
</html>
